<div class="container">
  <div class="operation">
    <button class="btn btn-info" (click)="showNewModal()">新增</button>
  </div>

  <!-- 新增 -->
  <div class="new-area" *ngIf="action=='new'">
    <form #myForm = "ngForm" (submit)="addTerm(myForm.value)">
      <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">学期名</label>
        <div class="col-sm-10">
          <input type="text" 
          class="form-control" 
          name="name" 
          required 
          [(ngModel)]="term.name" 
          placeholder="如：2018年第一学期"
          #uname="ngModel"
          >
        </div>
      </div>
      <div class="row" *ngIf="uname.invalid && (uname.touched || uname.dirty)">
        <p class="col-sm-2"  *ngIf="uname.errors.required">
            
        </p>
        <p class="col-sm-10 error"  *ngIf="uname.errors.required">
          请输入学期名称
        </p>
      </div>
      <div class="form-group row">
        <label for="daterange" class="col-sm-2 col-form-label">时间区间 </label>
        <div class="col-sm-10">
          <input placeholder="学期开始时间~结束时间" readonly 
          #urange="ngModel" 
          type="text" 
          class="form-control" 
          name="daterange" 
          [(ngModel)]="daterange" 
          bsDaterangepicker 
          #dpr="bsDaterangepicker">
        </div>
      </div>
     
      <div class="form-group row">
        <div class="col-sm-2">
          <button type="submit" [disabled]="!myForm.form.valid" class="btn btn-success" >保存</button>
        </div>
        <div class="col-sm-2">
            <button type="rest" class="btn btn-light" (click)="showNewModal()">取消</button>
        </div>
      </div>
    </form>
  </div>

    <!-- 提示 -->
    <div  *ngFor="let alert of alerts" >
      <alert [type]="alert.type" [dismissOnTimeout]="alert.timeout">{{ alert.msg }}</alert>
    </div>

  <!-- 列表 -->
  <div class="list">
    <table class="table">
      <thead>
        <tr >
          <th scope="col">#</th>
          <th scope="col">学期名称</th>
          <th scope="col">开始时间</th>
          <th scope="col">结束时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of terms">
          <th scope="row">{{ item.id }}</th>
          <td>{{ item.name }}</td>
          <td>{{ item.start_day }}</td>
          <td>{{ item.end_day }}</td>
          <td>
            <button (click)="openEditModal2(editTemplate, item)" class="btn btn-primary btn-sm" type="button">编辑</button>
            <button (click)="removeTerm(item)" class="btn btn-primary btn-sm" type="button">删除</button>
          </td>
        </tr>
         
      </tbody>
    </table>
  </div>

  <!-- 修改模板 -->
  <ng-template #editTemplate>
    <div class="modal-header">
        <h4 class="modal-title pull-left">修改</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editModalRef.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editForm="ngForm" (submit)="editTerm(editForm.value)">
          <div class="form-group row">
              <label for="name" class="col-sm-3 col-form-label">学期名</label>
              <div class="col-sm-9">
                  <input type="text"  *ngIf="term"
                  required 
                  class="form-control" 
                  name="name" 
                  [(ngModel)]="term.name" 
                  placeholder="如：2018年第一学期"
                  value="{{term.name}}"
                  #uname="ngModel"
                  >
              </div>
          </div>
  
          <div class="form-group row">
              <label for="daterange" class="col-sm-3 col-form-label">时间区间</label>
              <div class="col-sm-9">
                  <input placeholder="学期开始时间~结束时间" readonly 
                  #urange="ngModel"
                  type="text"
                  class="form-control"
                  name="editDaterange"
                  [(ngModel)]="editDaterange"
                  bsDaterangepicker
                  #dpr="bsDaterangepicker" />
              </div>
          </div>
          <div class="form-group row">
              <div class="col-sm-2">
                  <button type="submit" [disabled]="!editForm.form.valid" class="btn btn-success" >保存</button>
              </div>
          </div>
        </form>
         
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="editModalRef.hide()">Close</button>
      </div>
  </ng-template>
  
</div>
